<!--
 * @Author: Jolyne
 * @Date: 2023-09-22 15:45:45
 * @LastEditTime: 2023-09-22 15:47:24
 * @LastEditors: Jolyne
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>直接插入十万条数据</title>
  </head>

  <body>
    <ul id="list-container"></ul>

    <script>
      const oListContainer = document.getElementById("list-container");

      const fetchData = () => {
        return new Promise((resolve) => {
          const response = {
            code: 0,
            msg: "success",
            data: [],
          };

          for (let i = 0; i < 1000000; i++) {
            response.data.push(`content-${i + 1}`);
          }

          setTimeout(() => {
            resolve(response);
          }, 100);
        });
      };

      // 模拟请求后端接口返回十万条数据
      // 渲染 total 条数据中的第 page 页，每页 pageCount 条数据
      const renderData = (data, total, page, pageCount) => {
        // base case -- total 为 0 时没有数据要渲染 不再递归调用
        if (total <= 0) return;

        // total 比 pageCount 少时只渲染 total 条数据
        pageCount = Math.min(pageCount, total);

        requestAnimationFrame(() => {
          const startIdx = page * pageCount;
          const endIdx = startIdx + pageCount;
          const dataList = data.slice(startIdx, endIdx);

          // 将 pageCount 条数据插入到容器中
          for (let i = 0; i < pageCount; i++) {
            const oItem = document.createElement("li");
            oItem.innerText = dataList[i];
            oListContainer.appendChild(oItem);
          }

          renderData(data, total - pageCount, page + 1, pageCount);
        });
      };

      fetchData().then((res) => {
        renderData(res.data, res.data.length, 0, 200);
      });
    </script>
  </body>
</html>
